<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li class="clearfix">
                <div class="sel-btn"></div>
                <dl class="goods-info">
                    <dt>
                        <a href=""><img src="images/1.jpg" height="350" width="350" alt="" /></a>
                    </dt>
                    <dd>
                        <h2><a href="">梦幻雪冰</a></h2>
                        <p>HTML5学堂</p>
                    </dd>
                </dl>
                <dl class="shop-info">
                    <dt><em>￥</em><span>10.0</span><var>元</var></dt>
                    <dd>
                        <div><label for="ipt">数量:</label></div>
                        <div><input type="text" id="ipt" value="1" /></div>
                    </dd>
                </dl>
                <span class="del"></span>
            </li>
            <li class="clearfix">
                <div class="sel-btn"></div>
                <dl class="goods-info">
                    <dt>
                        <a href=""><img src="images/1.jpg" height="350" width="350" alt="" /></a>
                    </dt>
                    <dd>
                        <h2><a href="">梦幻雪冰</a></h2>
                        <p>HTML5学堂</p>
                    </dd>
                </dl>
                <dl class="shop-info">
                    <dt><em>￥</em><span>22.1</span><var>元</var></dt>
                    <dd>
                        <div><label for="ipt">数量:</label></div>
                        <div><input type="text" id="ipt"  value="1"/></div>
                    </dd>
                </dl>
                <span class="del"></span>
            </li>
            <li class="clearfix">
                <div class="sel-btn"></div>
                <dl class="goods-info">
                    <dt>
                        <a href=""><img src="images/1.jpg" height="350" width="350" alt="" /></a>
                    </dt>
                    <dd>
                        <h2><a href="">梦幻雪冰</a></h2>
                        <p>HTML5学堂</p>
                    </dd>
                </dl>
                <dl class="shop-info">
                    <dt><em>￥</em><span>30.0</span><var>元</var></dt>
                    <dd>
                        <div><label for="ipt">数量:</label></div>
                        <div><input type="text" id="ipt"/  value="3"></div>
                    </dd>
                </dl>
                <span class="del"></span>
            </li>
            <li class="clearfix">
                <div class="sel-btn"></div>
                <dl class="goods-info">
                    <dt>
                        <a href=""><img src="images/1.jpg" height="350" width="350" alt="" /></a>
                    </dt>
                    <dd>
                        <h2><a href="">梦幻雪冰</a></h2>
                        <p>HTML5学堂HTML5学堂</p>
                    </dd>
                </dl>
                <dl class="shop-info">
                    <dt><em>￥</em><span>30.0</span><var>元</var></dt>
                    <dd>
                        <div><label for="ipt">数量:</label></div>
                        <div><input type="text" id="ipt"  value="1"/></div>
                    </dd>
                </dl>
                <span class="del"></span>
            </li>             <li class="clearfix">
                <div class="sel-btn"></div>
                <dl class="goods-info">
                    <dt>
                        <a href=""><img src="images/1.jpg" height="350" width="350" alt="" /></a>
                    </dt>
                    <dd>
                        <h2><a href="">梦幻雪冰</a></h2>
                        <p>HTML5学堂HTML5学堂</p>
                    </dd>
                </dl>
                <dl class="shop-info">
                    <dt><em>￥</em><span>20.0</span><var>元</var></dt>
                    <dd>
                        <div><label for="ipt">数量:</label></div>
                        <div><input type="text" id="ipt"  value="1"/></div>
                    </dd>
                </dl>
                <span class="del"></span>
            </li>             <li class="clearfix">
                <div class="sel-btn"></div>
                <dl class="goods-info">
                    <dt>
                        <a href=""><img src="images/1.jpg" height="350" width="350" alt="" /></a>
                    </dt>
                    <dd>
                        <h2><a href="">梦幻雪冰</a></h2>
                        <p>HTML5学堂HTML5学堂</p>
                    </dd>
                </dl>
                <dl class="shop-info">
                    <dt><em>￥</em><span>41.0</span><var>元</var></dt>
                    <dd>
                        <div><label for="ipt">数量:</label></div>
                        <div><input type="text" id="ipt"  value="1"/></div>
                    </dd>
                </dl>
                <span class="del"></span>
            </li>     
        </ul>
        <div class="sel-result">
            <div class="sel-allbtn"></div>
            <div>全选</div>
            <div class="accounts">结算</div>
            <div class="add-goods">模拟购物</div>
        </div>
    </div>
    <script type="text/javascript">
        var selBtn = $(".sel-btn");
        var selAllBtn = $(".sel-allbtn");
        var liPar = $(".wrap ul");
        var accounts = $(".accounts");
        var addGoods = $(".add-goods");
        var shopInfo = $(".shop-info");
        var selectAll = false;
        var selCount = 0;
        var sum = 0;

        // 单选样式
        liPar.on("click", ".sel-btn", function() {
            var _this = $(this);

            selBtn = $(".sel-btn");
            // 每次点击清除统计个数
            selCount = 0;
            // 点击小圆圈，如果未选中则选中，否则取消选中
            _this.toggleClass("has-sel");
            // 当小圆圈没有全部选中，则全选按钮不选中
            selBtn.each(function() {
                if($(this).hasClass("has-sel")) {
                    selCount++;
                }
            });

            // 添加样式
            if (selBtn.length == selCount) {
                selAllBtn.addClass("has-sel");
            } else {
                selAllBtn.removeClass("has-sel");
            }

            console.log();
        });

        // 全选样式
        selAllBtn.click(function() {
            var _this = $(this);

             _this.toggleClass("has-sel");
            selBtn.each(function() {
                if(!_this.hasClass("has-sel")) {
                    selBtn.removeClass("has-sel");
                } else {
                    selBtn.addClass("has-sel");
                }
            });            
        });

        // 删除功能
        liPar.on("click", ".del", function() {
            $(this).parent().remove();
        });

        // 结算功能
        accounts.click(function() {
            sum = 0;

            shopInfo = $(".shop-info");
            shopInfo.each(function() {
                var _this = $(this);
                console.log(_this.siblings(".sel-btn").hasClass("has-sel"));
                if (_this.siblings(".sel-btn").hasClass("has-sel")) {
                    sum += _this.find("span").text() * _this.find("input").val();   
                };
            });
            alert(sum);
        }); 

        // 模拟购物
        addGoods.click(function() {
            liPar.append(liPar.children("li").eq(0).clone())
        });
    </script>
</body>
</html>